<template>
  <div class="dialog">
    <el-dialog
      :title="titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item
          label="关联批次："
          prop="batchId"
          class="w100p"
        >
          <el-select
            v-model="formData.batchId"
            placeholder="搜索报告需要关联的批次"
            clearable
          >
            <el-option
              v-for="item in batchList"
              :key="item.batchId"
              :label="item.batchName"
              :value="item.batchId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="上传人："
          prop="personNo"
          class="w100p"
        >
          <el-select
            v-model="formData.personNo"
            placeholder="请选择上传人"
            clearable
            @change="(e) => {
              let index = personList.findIndex(item => item.personNo === e);
              if (index !== -1) {
                $set(formData, 'name', personList[index].person&&personList[index].person.name)
              }
            }"
          >
            <el-option
              v-for="item in personList"
              :key="item.personNo"
              :label="item.person.name"
              :value="item.personNo"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="上传日期："
          prop="uploadDate"
          class="w100p"
        >
          <el-date-picker
            v-model="formData.uploadDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item
          label="报告图片"
          prop="reportFileList"
          class="w100p"
        >
          <UploadFile :module-type="moduleType" :auto-delete="false" :file-list.sync="reportFileList" multiple accept=".jpg, .jpeg, .png, .pdf" choose-area="images" show-file-list-type="images" @addFile="(res, uploadFile) => handlerAddFileList(res, uploadFile, 'png')" @removeFile="handlerDeleteId($event, 'png')" />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="cancelbtn"
          @click="cancel()"
        >取 消</el-button>
        <el-button
          type="primary"
          class="savebtn"
          @click="save('ruleForm')"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile/index';
import batchApi from '@/api/processing-management/process-batch-manage/process-batch-creation';

export default {
  name: '',
  components: { UploadFile },
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ''
    },
    personList: {
      type: Array,
      default: () => []
    },
    editobj: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {
        img: '',
        personName: '',
        uploadDate: ''
      },
      pictureList: [],
      batchList: [],
      reportFileList: [],
      reportFileLists: [],
      videoUrlList: [],
      docuemntList: [],
      moduleType: 'PROCESSTEST',
      upDownType: 'FTP',
      rules: {
        batchId: [
          {
            required: true,
            message: '请选择关联批次',
            trigger: ['blur', 'change']
          }
        ],
        reportFileList: [
          {
            required: true,
            message: '请选择报告图片',
            trigger: ['blur', 'change']
          }
        ],
        personNo: [
          {
            required: true,
            message: '请输入上传人',
            trigger: ['blur', 'change']
          }
        ],
        uploadDate: [
          {
            required: true,
            message: '请输入上传时间',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
      this.queryBatch();
      this.reportFileList = [];
      this.reportFileLists = [];

      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      })
    }
    // editobj(v) {
    //   this.formData = v;
    //   this.reportFileList = this.formData.reportFileList;
    //   this.reportFileLists = this.formData.reportFileList;
    // }
  },
  created() {},
  mounted() {},
  methods: {
    edit(e) {
      this.formData = e;
      this.$nextTick(() => {
        this.reportFileList = JSON.parse(JSON.stringify(this.formData.reportFileList));
        this.reportFileLists = JSON.parse(JSON.stringify(this.formData.reportFileList));
      })
      this.queryBatch();
    },
    queryBatch() {
      batchApi.queryByCondition({
        status: 'FINISH'
      }).then(res => {
        if (res.code === 1) {
          this.batchList = res.data;
          this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
          })
        }
      });
    },

    // 添加-轮播图/视频
    handlerAddFileList(res, file, type) {
      if (type === 'png') {
        this.reportFileLists.push(res.data);
        this.$set(this.formData, 'reportFileList', this.reportFileLists);
      }
      if (type === 'video') {
        this.videoUrlList = res.list;
      }
      if (type === 'docuemnt') {
        this.docuemntList = res.list;
      }
    },
    // 删除-轮播图/视频
    handlerDeleteId(file, type) {
      if (type === 'video') {
        this.videoUrlList.splice(
          this.videoUrlList.findIndex(i => i.uid === file.uid),
          1
        );
      } else if (type === 'png') {
        this.reportFileList.splice(
          this.reportFileList.findIndex(i => i.uid === file.uid),
          1
        );
        this.reportFileLists = JSON.parse(JSON.stringify(this.reportFileList))
        this.$set(this.formData, 'reportFileList', this.reportFileLists);
      } else {
        this.docuemntList.splice(
          this.docuemntList.findIndex(i => i.uid === file.uid),
          1
        );
      }
    },
    save(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          // let form = new FormData();
          // console.log(this.pictureList[0]);
          // form.append('file', this.pictureList[0]);
          // let res = await QualityManage.addPicture(form);
          // if (res.code !== 1) {
          //   this.$message.error('图片保存失败');
          //   return;
          // }
          // this.formData.pictureNo = res.data;
          // return;
          this.$emit('addPicture', this.formData);
          this.cancel();
        }
      });
    },
    close() {
      this.$emit('closeDialog');
    },
    cancel() {
      this.$emit('closeDialog');
      this.formData = {};
      this.pictureList = [];
      this.$nextTick(() => {
        // this.$refs['ruleForm'].clearValidate();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__wrapper,
  .el-dialog,
  .el-dialog__body,
  .el-form,
  .el-form-item,
  .el-form-item__label {
    min-width: 160px !important;
  }
}
</style>
